import React, { useState, useEffect } from "react";
import { Button, Form, Input, Select } from "antd";
import type { FormProps } from "antd";
const Myfrom = (props) => {
  useEffect(() => {
    form.setFieldsValue(props.itemobj);
  }, []);
  const onFinish: FormProps["onFinish"] = (values) => {
    console.log("Success:", values);
    let tags = [];
    if (values.tags == 1) {
      tags = ["全栈工程师", "Next-Admin"];
    } else {
      tags = ["全栈工程师", "橙子表单"];
    }
    if (props.title == "添加") {
      let obj = {
        key: new Date().getTime(),
        ...values,
        tags,
      };
      props.handleOk(obj,'添加');
    } else {
      let obj = {
        ...props.itemobj,
        ...values,
        tags,
      };
      props.handleOk(obj,'编辑');
    }
  };
  const [form] = Form.useForm();
  return (
    <Form style={{ maxWidth: 600 }} onFinish={onFinish} form={form}>
      <Form.Item
        label="用户名"
        name="name"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="角色"
        name="role"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="简介"
        name="desc"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="标签"
        name="tags"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Select
          defaultValue="lucy"
          options={[
            { value: 1, label: "全栈工程师" },
            { value: 2, label: "Admin" },
          ]}
        />
      </Form.Item>
      <Form.Item label={null}>
        <Button type="primary" htmlType="submit">
          确定
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Myfrom;
